<template>
  <div class="box">
    <div class="leftBox">
      <el-row>
        <el-col :span="12" v-for="item in titleList" :key="item.id"
          ><div class="grid-content bg-purple">
            <div class="title" @click="toCatalogue(item)">{{ item.title }}</div>
            <!-- 新闻title组件 -->
            <List :newsList="item.list" /></div
        ></el-col>
      </el-row>
    </div>
    <div class="rightBox">
      <div class="top">
        <div class="rightTop">
          <!--值班信息 -->
          <div style="margin-left: 8px">
            今日值班<i class="el-icon-date"></i>
          </div>
          <div style="margin-right: 8px">{{ days.day }}</div>
        </div>
        <div class="bottom">
          <div>值班领导：{{ beOnDuty.dutyLead || "暂无安排" }}</div>
          <div>值班民警：{{ beOnDuty.dutyPolice || "暂无安排" }}</div>
          <div style="margin-left: 60px">
            值班室：{{
              beOnDuty.dutyLead ? "西安市禁毒委员会办公室" : "暂未安排"
            }}
          </div>
          <div>备勤待命：{{ beOnDuty.dutyLead ? "待命中" : "暂未安排" }}</div>
          <div>值班电话：{{ beOnDuty.specialPlane || "暂无安排" }}</div>
        </div>
      </div>
      <div class="rightCenter">
        <div class="top">系统链接</div>
        <div class="bottom">
          <el-select
            value=""
            placeholder="--省公安机关导航--"
            height="200px"
            size="medium"
          >
            <el-option label="省公安机关导航" value="省公安机关导航">
            </el-option>
          </el-select>
          <el-select
            value=""
            placeholder="--市局机关导航--"
            height="200px"
            size="medium"
          >
            <el-option label="市局机关导航" value="市局机关导航"> </el-option>
          </el-select>
          <el-select
            value=""
            placeholder="--各市禁毒支队导航--"
            height="200px"
            size="medium"
          >
            <el-option label="各市禁毒支队导航" value="各市禁毒支队导航">
            </el-option>
          </el-select>
        </div>
      </div>
      <!-- 系统链接 -->
      <div class="rightBottom">
        <div class="top">法律法规</div>
        <div class="bottom">
          <div>.省市细则</div>
          <div>.地方法规</div>
          <div>.行政法规</div>
        </div>
      </div>
      <!-- 二维码轮播图 -->
      <div class="QRcode">
        <div class="swiper-container" id="floor1Swiper" ref="cur">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="qr in QRcodeList" :key="qr.id">
              <div class="title">{{ qr.title }}</div>
              <img :src="qr.url" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import List from "@/components/list/index.vue";
import Swiper from "swiper";
import { day } from "@/utils/timer";
export default {
  name: "Annunciate",
  components: {
    List,
  },
  data() {
    return {
      titleList: [
        {
          title: "通知通告",
          id: 1,
          list: [],
        },
        {
          title: "重点工作",
          id: 4,
          list: [],
        },
        {
          title: "支队动态",
          id: 23,
          list: [],
        },
        {
          title: "基层动态",
          id: 24,
          list: [],
        },
        {
          title: "党建队建",
          id: 25,
          list: [],
        },
        {
          title: "调研交流",
          id: 26,
          list: [],
        },
        {
          title: "媒体报道",
          id: 27,
          list: [],
        },
        {
          title: "工作简报",
          id: 7,
          list: [],
        },
      ],
      QRcodeList: [
        {
          url: require("../../../assets/images/ew1.4f9fa4b0.png"),
          id: "1",
          title: "中国禁毒微信公众号",
        },
        {
          url: require("../../../assets/images/ew2.60aebe73.png"),
          id: "2",
          title: "中国禁毒官方微博",
        },
        {
          url: require("../../../assets/images/ew3.1c1f908a.png"),
          id: "3",
          title: "陕西省禁毒微信公众号",
        },
        {
          url: require("../../../assets/images/ew4.043a62de.png"),
          id: "4",
          title: "陕西省禁毒官方微博",
        },
        {
          url: require("../../../assets/images/ew5.f472b8b9.png"),
          id: "5",
          title: "今日头条—陕西禁毒",
        },
        {
          url: require("../../../assets/images/ew6.9e735b67.png"),
          id: "6",
          title: "西安禁毒微信公众号",
        },
      ],
      // 值班数据
      beOnDuty: {},
      days: "",
    };
  },
  mounted() {
    this.getList();
    this.getListS();
    this.days = day();
    new Swiper(this.$refs.cur, {
      mousewheel: true,
      loop: true, // 循环模式选项
      autoplay: true, //开启自动循环
    });
  },
  methods: {
    // 获取数据
    async getList() {
      // 获取值班数据
      let result = await this.$API.receptionist.receptionDuty();
      if (result.status == 200) {
        result.data.forEach((item) => {
          this.beOnDuty = item;
        });
      }
      // 获取通知通告数据
      let data = { pageNum: 1, pageSize: 8 };
      let results = await this.$API.receptionist.reqGetInForm(data);
      // 过滤通知通告数据
      // 循环栏目数组
      this.titleList.forEach((item) => {
        // 判断title是否为通知通告
        if (item.title == "通知通告") {
          let arr = results.data.records.filter((item1) => {
            return item1;
          });
          // map重构数组
          item.list = arr.map((item3) => {
            return {
              title: item3.title,
              id: item3.id,
              isInForm: true,
              data: item3.issueTime,
              creator: item3.username,
              releaseTime: item3.expirationDate,
              expirationState: item3.expirationState,
              file: item3.file,
              fileName: item3.fileName,
            };
          });
        }
      });
    },
    // 获取栏目下的新闻
    getListS() {
      this.titleList.forEach(async (item) => {
        if (item.title != "通知通告") {
          let data = { columnId: item.id, pageNum: 1, pageSize: 8 };
          let res = await this.$API.receptionist.newsByColumnId(data);
          if (res.status === 200) {
            let arr = res.data.records.filter((item1) => {
              return item1;
            });
            // map重构数组
            item.list = arr.map((item3) => {
              return {
                title: item3.title,
                id: item3.id,
                data: item3.releaseTime,
                creator: item3.username,
                privacy: item3.privacy,
              };
            });
          }
        }
      });
    },
    // 跳往catalogue页面
    toCatalogue(item) {
      // 判断是否点击的是通知通告
      if (item.title == "通知通告") {
        this.$router.push({
          path: "/homePage/catalogue",
          query: {
            isInForm: true,
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  height: 14.3rem;
  .leftBox {
    margin-left: 20px;
    width: 67%;
    height: 100%;
    .title {
      cursor: pointer;
      font-size: 0.35rem;
      text-align: center;
      line-height: 0.5rem;
      color: white;
      font-weight: 500;
      width: 3rem;
      height: 0.5rem;
      background: -webkit-linear-gradient(top, #93d1f3, #3baeea);
      margin: 16px;
    }
  }
  .rightBox {
    margin-top: 16px;
    width: 31%;
    // background-color: red;
    .top {
      width: 100%;
      height: 3.3rem;
      .rightTop {
        background-color: #3d9cd6;
        color: white;
        font-size: 0.3rem;
        font-weight: 600;
        width: 100%;
        height: 0.6rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .bottom {
        background-color: #ecf7fb;
        font-size: 0.24rem;
        font-weight: 600;
        width: 100%;
        height: 2.7rem;
        color: #4085bc;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        div {
          margin-left: 40px;
        }
      }
    }
    .rightCenter {
      margin-top: 16px;
      width: 100%;
      // background-color: pink;
      .top {
        width: 100%;
        height: 0.5rem;
        background: -webkit-linear-gradient(top, #93d1f3, #3baeea);
        font-size: 0.3rem;
        font-weight: 600;
        color: white;
        text-align: center;
        line-height: 0.5rem;
      }
      .bottom {
        width: 100%;
        height: 2.8rem;
        // background-color: pink;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        ::v-deep .el-input__inner {
          height: 50px;
          line-height: 36px;
          border: 4px solid #4085bc;
        }
      }
    }
    .rightBottom {
      margin-top: 16px;
      width: 100%;
      .top {
        width: 100%;
        height: 0.5rem;
        background: -webkit-linear-gradient(top, #93d1f3, #3baeea);
        font-size: 0.3rem;
        font-weight: 600;
        color: white;
        text-align: center;
        line-height: 0.5rem;
      }
      .bottom {
        width: 100%;
        height: 2.8rem;
        border: 1px solid #cccccc;
        border-radius: 5px;
        color: #4b90cc;
        font-size: 0.3rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        div {
          cursor: pointer;
          width: 80%;
          height: 0.6rem;
          border: 1px solid #aecfe8;
          text-align: center;
          line-height: 0.6rem;
        }
      }
    }
    .QRcode {
      width: 2.5rem;
      height: 2.5rem;
      margin: 0.4rem 0px 0px 1.5rem;
      img {
        width: 100%;
        height: 100%;
      }
      .title {
        width: 2.5rem;
        height: 0.5rem;
        font-size: 0.25rem;
        text-align: center;
        line-height: 0.7rem;
      }
    }
  }
}
</style>
